<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="author" content="Yb">
    <title>简易选项卡</title>
    <style>
        html,
        body {
            height: 100%;
            font-family: 'Microsoft YaHei';
            font-size: 14px;
        }
        
        section {
            width: 460px;
            margin: 10px auto 0 auto;
            border: 1px solid #000;
        }
        
        section ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
            background-color: #000;
        }
        section li{
            display: inline-block;
            margin: 0;
            line-height: 30px;
            width: 70px;
            text-align: center;
            border-right: 1px solid #000;
            color: #fff;
        }
        section li:hover{
            cursor: pointer;
        }
        .active{
            color: #000;
            background-color: #aaa;
        }

        main{
            width: 460px;
            margin: 0 auto;
            border: 1px solid #000;
            border-top: none;
            padding-top: 14px;
        }
        main ul{
            margin-top: 0;
        }
        main li{
            margin: 0;
            line-height: 32px;
        }
    </style>
</head>

<body>
    <section>
        <ul>
            <li class="active">第一课</li>
            <li>第二课</li>
            <li>第三课</li>
        </ul>
    </section>
    <main>
        <ul>
            <li>网页特效原理分析</li>
            <li>响应用户操作</li>
            <li>提示框效果</li>
            <li>事件驱动</li>
            <li>元素属性操作</li>
            <li>动手编写第一个JS特效</li>
            <li>引入函数</li>
            <li>网页换肤效果</li>
            <li>展开/收缩播放列表效果</li>
        </ul>
    </main>
</body>

</html>
<script>
window.onload = function(){
    var lesson = document.querySelectorAll('section li');
    var ul = document.querySelector('main ul');

    var main = [
        '<li>网页特效原理分析</li><li>响应用户操作</li><li>提示框效果</li><li>事件驱动</li><li>元素属性操作</li><li>动手编写第一个JS特效</li><li>引入函数</li><li>网页换肤效果</li><li>展开/收缩播放列表效果</li>',
        '<li>改变网页背景颜色</li><li>函数传参</li><li>高重用性函数的编写</li><li>126邮件全选效果</li><li>循环及便利操作</li><li>调试器的简单使用</li><li>典型循环的构成</li><li>for循环配合if判断</li><li>className的使用</li><li>戛纳印象效果</li><li>数组</li><li>字符串连接</li>',
        '<li>调试器的简单使用</li><li>典型循环的构成</li><li>for循环配合if判断</li><li>戛纳印象效果</li><li>数组</li><li>字符串连接</li>'
    ];


    var i = 0;
    for(i = 0; i < lesson.length; i++){
        lesson[i].index = i;
        lesson[i].onmouseover = function(){
            for(i = 0; i < lesson.length; i++){
                lesson[i].className = '';
            }
            this.className = 'active';
            ul.innerHTML = main[this.index];
        }

    }


} 
</script>